<template>
  <div class="font-bold">设置适用企业</div>
  <div class="evaluation-system-company">
    <el-form :model="formState" :rules="formRules" ref="formRef">
      <div class="flex gap-10 items-first-baseline">
        <el-form-item label="" prop="suitCompanyType">
          <el-radio-group v-model="formState.suitCompanyType">
            <el-radio :value="1">全部企业</el-radio>
            <el-radio :value="2">企业名单</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-link type="primary" class="-translate-y-1px">名单详情</el-link>
      </div>

      <el-form-item label="" prop="suitCompanyIds">
        <div class="w-full">
          <evaluation-system-suit-company-list
            v-model="formState.suitCompanyIds"
            :readonly="formState.suitCompanyType == 1"
          />
        </div>
      </el-form-item>

      <div class="mt-4">
        <el-form-item label="" prop="conditionsApply">
          <el-radio-group v-model="formState.conditionsApply">
            <el-radio :value="0">无其他条件</el-radio>
            <el-radio :value="1">满足所有条件</el-radio>
            <el-radio :value="2">满足任一条件</el-radio>
          </el-radio-group>
        </el-form-item>
        <div class="mt-2">
          <el-form-item label="企业分组" prop="companyGroupIds">
            <el-input v-model="formState.companyGroupIds" style="width: 200px" />
          </el-form-item>
        </div>
      </div>
    </el-form>
  </div>
</template>

<script setup lang="ts">
import { type FormInstance } from 'element-plus'
import { ref, reactive } from 'vue'

const formRef = ref<FormInstance>()
const formState = reactive({
  suitCompanyType: 1,
  suitCompanyIds: [],
  conditionsApply: '',
  companyGroupIds: ''
})

const suitCompanyIdsValidator = (_rule, value, callback) => {
  // 必填校验
  if (!value.length && formState.suitCompanyType !== 1) {
    return callback(new Error('请输入企业名单'))
  }
  callback()
}

const formRules = reactive({
  suitCompanyType: [{ required: true, message: '请选择适用企业类型' }],
  suitCompanyIds: [{ validator: suitCompanyIdsValidator, trigger: 'change' }],
  conditionsApply: [{ required: true, message: '请选择条件限制' }],
  companyGroupIds: [{ required: true, message: '请选择企业分组' }]
})

defineExpose({
  form: formRef,
  state: formState
})
</script>

<style>
.evaluation-system-company .el-textarea {
  height: 100% !important;
}

.evaluation-system-company .el-textarea .el-textarea__inner {
  height: 100%;
}

.evaluation-system-company .items-first-baseline {
  align-items: first baseline;
}
</style>
